<template>
	<view class="layout">
		<view class="navbar">
			<view class="statuBar" :style="{height:getStatusBarHeight()+'px'}"></view>
			<view class="titleBar" :style="{height:getTitleBarHeight()+'px', marginLeft:getLeftIconLeft() + 'px'}">
				
				<view class="photograph" @click="toHome">
					<uni-icons type="home" color="#888" size="26"></uni-icons>
				</view>
				<view class="search" @click="toSearch">
					<uni-icons type="search" color="#888" size="20"></uni-icons>
					<text class="text">搜索</text>
				</view>
				<view class="message">
					<uni-icons type="email" color="#888" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}">
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { 
	getStatusBarHeight,
	getTitleBarHeight,
	getNavBarHeight,
	getLeftIconLeft,
	} from '@/utils/system.js'
defineProps({
	title:{
		type:String,
		default:""
	}
})

const toSearch = () => {
	uni.navigateTo({
		url:'../Search/Search'
	})
}

const toHome = () => {
	uni.reLaunch({
		url:"/pages/DiscoverView/DiscoverView"
	})
}

</script>

<style lang="scss" scoped>
.layout{
	background-color: ghostwhite;
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		z-index: 10;
		background: ghostwhite;
		.statuBar{
			
		}
		.titleBar{
			display: flex;
			align-items: center;
			background-color: ghostwhite;
			padding: 30rpx;
			padding-top: 50rpx;
			gap: 30rpx;
			
			.title{
				font-size: 22px;
				font-weight: 700;
				color: #333;
			}
			
			.search{
				width: 600rpx;
				height: 60rpx;
				border-radius: 60rpx;
				background: rgba(255,255,255,0.4);
				border: 1px solid #fff;
				margin-left: 0rpx;
				color: #999;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				.text{
					padding-left: 20rpx;
				}
			}
		}
	}
}
</style>